import React, { useEffect } from 'react';
import { Image } from 'react-native';
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

// 导入组件
import { removeBackExitApp ,bindBackExitApp } from '../utils/BackApp'

// 导入路由列表
import routerList from './router'

// 导入Tab路由
import HomeIndex from '../pages/Home'
import SettingScreen from '../pages/Setting'

//  icon图片
import HomeIconActive from '../images/icon_home_active.png'
import HomeIconNormal from '../images/icon_home_normal.png'
import WorkIconActive from '../images/icon_work_active.png'
import WorkIconNormal from '../images/icon_work_normal.png'



// 引用路由API
const Tab = createMaterialBottomTabNavigator();

const Stack = createStackNavigator();


const HomeScreen = (state) => {
  
  useEffect(() => {
    bindBackExitApp()
    return () => {  //页面销毁
      removeBackExitApp()
    }
  }, []);



  return (
    <Tab.Navigator
      initialRouteName="设置"
      initialRoute="SettingScreen"
      activeColor="red"
      inactiveColor="white"
      barStyle={{ backgroundColor: '#694fad' }}
      barStyle={{ paddingBottom: 0 }} //距离底部距离
    >
      <Tab.Screen name="首页" component={HomeIndex}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ focused, color, size }) => (
            // <Image
            //   source={focused ? HomeIconActive : HomeIconNormal}
            //   style={{ width: size, height: size }}
            // />
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen name="设置" component={SettingScreen}
        options={{
          tabBarLabel: '设置',
          tabBarIcon: ({ focused, color, size }) => (
            <Image
              source={focused ? WorkIconActive : WorkIconNormal}
              style={{ width: 26, height: 26 }} />
          ),
          tabBarBadge: 5,
        }}
      />

    </Tab.Navigator>
  );
}




const Router = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="首页" component={HomeScreen}
        options={{ headerShown: false }}
      ></Stack.Screen>
      {
        routerList.map((o, i) => {
          let ele = ''
          if (o.options) ele = <Stack.Screen name={o.name} component={o.component} options={o.options} key={i}></Stack.Screen>
          else ele = <Stack.Screen name={o.name} component={o.component} key={i}></Stack.Screen>
          return ele
        })
      }
    </Stack.Navigator>
  )
}

export default Router